<template>
  <div class="left-menu" >
    <div class="menu-header" @click="toggleMenu()">
      <Icon type="arrow-left-b" v-if="state === 'on'"></Icon>
      <Icon type="arrow-right-b" v-if="state === 'off'"></Icon>
    </div>
    <Menu  active-name="sys" width="auto" >
      <div class="layout-logo-left"></div>
      <router-link to="/sys/users">
        <Menu-item name="1"><Icon type="person" :size="iconSize"></Icon><span v-if="state === 'on'">用户管理</span></Menu-item>
      </router-link>
      <Menu-item name="2"><Icon type="key" :size="iconSize"></Icon><span v-if="state === 'on'">角色管理</span></Menu-item>
      <Menu-item name="3"><Icon type="clipboard" :size="iconSize"></Icon><span v-if="state === 'on'">菜单配置</span></Menu-item>
      <Menu-item name="4"><Icon type="ios-people" :size="iconSize"></Icon><span v-if="state === 'on'">组织架构</span></Menu-item>
      <Menu-item name="5"><Icon type="ios-list-outline" :size="iconSize"></Icon><span v-if="state === 'on'">数据字典</span></Menu-item>
      <Menu-item name="6"><Icon type="ios-timer-outline" :size="iconSize"></Icon><span v-if="state === 'on'">定时任务</span></Menu-item>
      <Menu-item name="7"><Icon type="document-text" :size="iconSize"></Icon><span v-if="state === 'on'">系统日志</span></Menu-item>
      <Menu-item name="8"><Icon type="ios-cloud-upload-outline" :size="iconSize"></Icon><span v-if="state === 'on'">文件上传</span></Menu-item>
      <Menu-item name="9"><Icon type="speedometer" :size="iconSize"></Icon><span v-if="state === 'on'">SQL监控</span></Menu-item>

    </Menu>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'left-menu',
    props: ['module-name'],
    data: function () {
      return {
        state: 'on'
      }
    },
    computed: {
      iconSize () {
        return this.state === 'on' ? 14 : 24
      }
    },
    methods: {
      toggleMenu () {
        this.$emit('toggleParentSpan')
        this.state === 'on' ? this.state = 'off' : this.state = 'on'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left-menu {
    padding: 0 5px 0;
  }
  .menu-header {
    height:30px;
    width: auto;
    background: #fff;
    text-align: center;
    line-height: 30px;
    color: #7c7c7c;
    font-size: 20px;
    border-right: 1px solid transparent;
    border-color: #d7dde4;
  }
  .ivu-menu-vertical .ivu-menu-item {
    cursor: pointer;
    padding: 14px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    z-index: 1;
  }
</style>
